<template>
  <div class="classify">
    <!--    头部导航-->
    <van-nav-bar fixed title="全部分类" />
    <!--    搜索框-->
    <div class="center-ser">
      <van-search placeholder="搜索商品" @focus="$router.push('/search')" />
    </div>

    <!--    分类-->
    <div class="list-box">
      <div class="box-lift">
        <ul>
          <li v-for="(item, index) in list" :key="item.category_id">
            <a
              :class="{ active: index === activeIndex }"
              href="#"
              @click="activeIndex = index"
              >{{ item.name }}</a
            >
          </li>
        </ul>
      </div>
      <div class="box-right">
        <div
          v-for="item in list[activeIndex]?.children"
          :key="item.category_id"
          class="box-ri"
          @click="$router.push(`/searchlist?categoryId=${item.name}`)"
        >
          <img :src="item.image?.external_url" alt="" srcset="" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { classify } from '@/api/classify'

export default {
  name: 'classifyCom',
  components: {},
  data () {
    return {
      activeIndex: 0,
      list: []
    }
  },
  computed: {},
  methods: {
    async getclass () {
      const {
        data: {
          data: { list }
        }
      } = await classify()
      this.list = list
    }
  },
  created () {
    this.getclass()
  }
}
</script>
<style lang="less">
.classify {
  .center-ser {
    .van-nav-bar__content {
      .van-nav-bar__title {
        font-weight: bolder;
      }
    }

    .van-search {
      position: fixed;
      width: 100%;
      top: 46px;
      z-index: 999;

      .van-search__content {
        border-radius: 20px;
        padding-left: 140px;
      }
    }
  }

  .list-box {
    height: 100vh;
    display: flex;
    margin-top: 100px;

    .box-lift {
      width: 85px;
      height: 100%;
      background-color: #f3f3f3;
      overflow: auto;

      a {
        display: block;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #444444;
        font-size: 12px;

        &.active {
          color: #fb442f;
          background-color: #fff;
          font-size: 18px;
        }
      }
    }

    .box-right {
      flex: 1;
      background-color: #ffffff;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      padding: 10px 0;
      overflow: scroll;

      .box-ri {
        width: 33.3%;
        margin-bottom: 10px;

        img {
          width: 70px;
          height: 70px;
          display: block;
          margin: 5px auto;
        }

        p {
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
